<template>
  <div class="addVisiting-container">
    <van-form label-align="left" @submit="onSubmit" ref="addTraceForm">
      <van-cell-group inset>
        <van-cell class="header" :title="'序列号：' + barcode" :border="false" />
        <van-field v-model="form.orderNumber" name="工单编号" label="工单编号" placeholder="请输入工单编号" />
        <van-field
          v-model="form.printerSn"
          name="机身号"
          label="机身号"
          placeholder="请输入/扫描机身号"
          required
          :rules="[{ required: true, message: '请输入/扫描机身号' }]"
        >
          <template #right-icon>
            <van-icon name="scan" size="20px" color="#3875C6" style="padding-left: 10px" @click="scanCode" />
          </template>
        </van-field>
        <van-field v-model="form.blackA4" name="黑白A4" label="黑白A4" placeholder="请输入黑白A4印量" />
        <van-field v-model="form.blackA3" name="黑白A3" label="黑白A3" placeholder="请输入黑白A3印量" />
        <van-field v-model="form.colorA4" name="彩色A4" label="彩色A4" placeholder="请输入彩色A4印量" />
        <van-field v-model="form.colorA3" name="彩色A3" label="彩色A3" placeholder="请输入彩色A3印量" />
      </van-cell-group>
      <div class="tips">打印测试页，记录当前设备当前印量值</div>
      <div class="bottom">
        <van-button round block type="primary" native-type="submit"> 确认提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { consumeTraceStorage, consumeTraceUpdate, getConsumeTraceInfo } from '@/api/consumeTrace.js'
import { Toast } from 'vant'
import { getSign } from '@/utils/jssdk'
import * as ww from '@wecom/jssdk'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const addTraceForm = ref(null)
    const state = reactive({
      barcode: '',
      traceId: '',
      form: {}
    })

    onMounted(() => {
      getSign()
      state.barcode = route.query.barcode
      if (route.query.traceId) {
        document.title = '修改追溯记录'
        state.traceId = decodeURIComponent(route.query.traceId)
        setTimeout(() => {
          _getConsumeTraceInfo()
        })
      }
    })
    const _getConsumeTraceInfo = () => {
      const params = { id: state.traceId }
      getConsumeTraceInfo(params).then((res) => {
        const { orderNumber, printerSn, blackA4, blackA3, colorA4, colorA3 } = res
        state.form = { orderNumber, printerSn, blackA4, blackA3, colorA4, colorA3 }
      })
    }
    const scanCode = () => {
      ww.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果
        scanType: ['qrCode', 'barCode'],
        success: function (res) {
          // 当needResult为1时返回处理结果
          const result = res.resultStr
          state.form.printerSn = result
          const msg = 'scanQRCode success' + JSON.stringify(res)
          alert(msg)
        },
        fail: function (err) {
          const msg = 'scanQRCode fail1' + JSON.stringify(err)
          // alert(msg)
        }
      })
    }

    const onSubmit = () => {
      addTraceForm.value.validate().then(() => {
        const params = Object.assign({}, state.form)
        params.barcode = state.barcode
        if (state.traceId) {
          params.id = state.traceId
          consumeTraceUpdate(params).then((res) => {
            Toast.success('修改成功！')
            setTimeout(() => {
              router.back()
            }, 500)
          })
        } else {
          consumeTraceStorage(params).then((res) => {
            Toast.success('新增成功！')
            setTimeout(() => {
              router.back()
            }, 500)
          })
        }
      })
    }

    return {
      addTraceForm,
      ...toRefs(state),
      onSubmit,
      scanCode
    }
  }
}
</script>

<style scoped lang="less">
.addVisiting-container {
  padding: 10px 0;
  background: #f1f5f8;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 64px;
  overflow-y: auto;
}
.van-cell-group--inset {
  margin: 0 10px;
}
.header {
  background: #e8f3ff;
  font-size: 18px;
  color: #3875c6;
}
.tips {
  font-size: 12px;
  color: #666666;
  text-align: center;
  margin-top: 12px;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f1f5f8;
  padding: 10px 16px;
}
</style>
